Added copy to clipboard button for console tab commands by aadeina · Pull Request #2431 · django/djangoproject.com

aadeina · 2026-01-05T03:58:47Z

Summary

Adds a copy-to-clipboard button to console tab code blocks (Unix / Windows installation commands).

Fixes: #1276, #2399
Builds on feedback from @sabderemane in PR #1434.

Changes

JavaScript

djangoproject/static/js/djangoproject.js

Extends existing clipboard functionality to support console tabs
Adds smart command text extraction that excludes:
- Shell prompts (.gp — e.g. $, ...>)
- Command output (.go)
Minimal change set (~20 lines added), reusing existing patterns and logic

SCSS

djangoproject/scss/_console-tabs.scss

Adds position: relative to console tab sections
Introduces .btn-clipboard styling using absolute positioning (no float)
Includes hover states and “Copied!” success feedback animation
Uses existing CSS variables for light/dark mode compatibility

Visual Comparison

Before

After

Video.Project.mp4

ulgens · 2026-01-05T12:31:04Z

This looks nice 🌻 I'd recommend installing git hooks (you can follow the last section of the readme) and rebasing the PR to have a bit more clear history.

aadeina · 2026-01-05T20:12:31Z

Hi @ulgens ,
I’ve cleaned up the branch and ensured the PR now contains only the intended commit.
Please let me know if anything else is needed.

adamzap

Here are some initial thoughts. Thanks for attempting this!

adamzap · 2026-01-23T17:00:43Z

djangoproject/static/js/djangoproject.js

    });

-    function on_success(el) {
+    function on_success() {


Why add an unused argument here and on line 145?

Good catch! Just to clarify — I actually removed the unused el parameter here, since it wasn't being used (the functions access success_el via closure instead). Happy to keep it if you prefer consistency with other patterns in the codebase.

Oh, thanks! Sorry for my misunderstanding here.

adamzap · 2026-01-23T17:03:23Z

djangoproject/static/js/djangoproject.js

+      // Console tabs: extract text excluding prompts (.gp) and output (.go)
+      const pre_el = console_section.querySelector('.highlight pre');
+      text = '';
+      if (pre_el) {


In what case is there not a <pre> element?

You're right — since Pygments always generates the <pre> element, this check isn't strictly necessary.
I'll remove it to keep the code cleaner. Thanks for pointing this out!

adamzap · 2026-01-23T17:07:23Z

djangoproject/static/js/djangoproject.js

+      const pre_el = console_section.querySelector('.highlight pre');
+      text = '';
+      if (pre_el) {
+        pre_el.childNodes.forEach(function (node) {


Do you think it would be more elegant to grab the text content like the old code was doing and just left trim the prompt?

(...).textContent.trim().replace(/^\$ /, '')

Great question! I went with the node-based approach mainly because:

It also handles the Windows tab (which uses ...> prompts)

It excludes command output marked with .go (in case any examples show output)

That said, if the console blocks only ever show simple $ prompts without output, a regex would definitely be simpler. I'm happy to switch to:

text = pre_el.textContent.trim().replace(/^(\$ |\.\.\.>)/gm, '');

Let me know which approach you'd prefer!

Let's see how the regex looks for now. I should have more time to look at this soon. Thanks!

I've updated to use the regex approach. Thanks!

aadeina · 2026-01-25T19:58:03Z

Updated per feedback — removed the if check. Thanks! Ready for another look when you have time.

adamzap · 2026-01-29T17:10:48Z

Thank you. In the future, could you wait to squash until the PR is ready? That way I can review new commits in isolation.

aadeina · 2026-02-02T18:21:20Z

Understood, apologies for the premature squash. I’ll keep commits separate going forward and appreciate the guidance on best practices.

adamzap

Thanks for the changes here. I'm seeing two small design issues with the "Copied!" text on console tabs:

I think the text should use our monospace font to match the "Copied!" text on code snippets
The text is changing the layout vertically, maybe one pixel, when it is present

Would you be able to address these?

adamzap · 2026-02-12T15:10:21Z

djangoproject/static/js/djangoproject.js

 document.querySelectorAll('.btn-clipboard').forEach(function (el) {
  el.addEventListener('click', function () {
+    // Remove any existing success message first
+    const existing = this.querySelector('.clipboard-success');


Could we call this success_el and drop the comment? I guess we'd need a let.

On second thought, I think existing_el or existing_success_el would be fine if you don't want to use the same variable.

Agreed. Renamed to existing_el for consistency.

adamzap · 2026-02-12T15:11:49Z

djangoproject/static/js/djangoproject.js

+    if (console_section) {
+      // Console tabs: extract text excluding prompts
+      const pre_el = console_section.querySelector('.highlight pre');
+      text = pre_el.textContent.replace(/^\$ |^\.\.\.\\>/gm, '');


Could we set the regex to a variable and drop the comment here and in the else below? Maybe prompt_regex?

Good call. Extracted this to const prompt_regex.

adamzap · 2026-02-12T15:12:31Z

djangoproject/static/js/djangoproject.js

+    }

-    navigator.clipboard.writeText(text).then(on_success, on_error);
+    navigator.clipboard.writeText(text.trim()).then(on_success, on_error);


Why is this trim call needed?

The .trim() prevents a trailing newline, so the command doesn't execute immediately upon paste.

… styling

aadeina · 2026-02-13T08:25:36Z

Visual comparison (1px layout shift fix):

Before:

LayoutShiftBefore.mp4

After:

LayoutShiftAfter.mp4

Please let me know if there's anything else you'd like me to adjust!

adamzap · 2026-02-19T20:22:52Z

Thanks for the changes. I'll try to get to this by end of tomorrow!

adamzap

👍 Looks great!

Thanks for your patience here. I will ask someone on the team to do a CSS review.

aadeina · 2026-02-20T21:42:05Z

Thanks so much for the thorough reviews and guidance, @adamzap! I really appreciate the time you took to help refine this. Looking forward to the CSS review.

aadeina force-pushed the docs-copy-to-clipboard branch from ad9d2d6 to 24e3b21 Compare January 5, 2026 19:16

aadeina closed this Jan 5, 2026

aadeina force-pushed the docs-copy-to-clipboard branch from bb03309 to 07c155d Compare January 5, 2026 19:39

aadeina reopened this Jan 5, 2026

aadeina force-pushed the docs-copy-to-clipboard branch from c22de90 to cd6cf4c Compare January 5, 2026 20:04

adamzap reviewed Jan 23, 2026

View reviewed changes

aadeina force-pushed the docs-copy-to-clipboard branch from cd6cf4c to b3cf678 Compare January 25, 2026 19:44

Add copy-to-clipboard button for console tab commands

b3cf678

Switch to regex approach and fix button alignment

9ab4ffa

adamzap reviewed Feb 12, 2026

View reviewed changes

Address review feedback: fix layout shift, refactor regex, and update…

a06e249

… styling

aadeina requested a review from adamzap February 18, 2026 03:10

adamzap approved these changes Feb 20, 2026

View reviewed changes

Uh oh!

Comments

Conversation

aadeina commented Jan 5, 2026

Summary

Changes

JavaScript

SCSS

Visual Comparison

Before

After

Uh oh!

ulgens commented Jan 5, 2026

Uh oh!

aadeina commented Jan 5, 2026

Uh oh!

adamzap left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aadeina commented Jan 25, 2026

Uh oh!

adamzap commented Jan 29, 2026

Uh oh!

aadeina commented Feb 2, 2026

Uh oh!

adamzap left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aadeina commented Feb 13, 2026

Uh oh!

adamzap commented Feb 19, 2026

Uh oh!

adamzap left a comment

Choose a reason for hiding this comment

Uh oh!

aadeina commented Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants